<template>
    <!--  图像的阴影效果  -->
    <el-card>
        <div>
          <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">
            <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <!-- 设置容器 -->
          <div id="linesatck"></div>
        </div>
    </el-card>
</template>

<script>
import request from "@/utils/request";
import * as echarts from 'echarts';

var option;
option = {
  title: {
    text: '用户注册趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['管理员', '普通用户']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '管理员',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '普通用户',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    }
  ]
};
 export default{
  data(){
    return{
      lineBox: null,
      timeRange: 'week',
      timeOptions: [
        { label: '最近一周', value: 'week' },
        { label: '最近一个月', value: 'month' },
        { label: '最近两个月', value: 'month2' },
        { label: '最近三个月', value: 'month3' }
      ]
    }
  },
  //确保document.getElementById('linesatck')DOM元素加载完成，后才执行。不然加载不出图表。
  mounted(){
    var optionData = document.getElementById('linesatck');
    var myChart = echarts.init(optionData, null, {
    renderer: 'svg'    //矢量图
    });
    option && myChart.setOption(option);
    this.load();
  },
  methods:{
    load() {
      if (!this.lineBox) {
        this.lineBox = echarts.init(document.getElementById('linesatck'))
      }
      request.get('/account/lineCharts/' + this.timeRange ).then(res => {
        option.xAxis.data = res.data.date
        option.series[0].data = res.data.admin
        option.series[1].data = res.data.user
        this.lineBox.setOption(option)
      })
    }
  }
 }

</script>

//需要设置容器大小才能展示图形
<style>
  #linesatck{
    width: 100%;
    height: 350px;
  }
</style>